<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-button size="default" type="danger" style="background-color: #E1337F;" @click="add()">
				<el-icon><Plus /></el-icon>添加</el-button>
			<div style="width: 100%;"><p style="text-align: center;">品种管理（一级路由）</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"/>
		<el-card >
		<div style="width: 100%;">
			
			  <el-table :data="data.breed" border style="width: 100%">
			    <el-table-column prop="breedid" label="编号" width="180" />
			    <el-table-column prop="breedname" label="名称" width="180" />
				<el-table-column prop="order" label="顺序" width="180" />
				<el-table-column prop="num" label="类型数量" width="180" />
				<el-table-column label="操作" width="100">
					<template #default="car">
						<el-button style="background-color:#E1337F;" size="default" type="danger" @click.prevent="update(car.row.breedid)">
							<el-icon><EditPen /></el-icon>更改
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="car">
						<el-button v-if="car.row.num==0" style="background-color:#E1337F;" size="default" type="danger" @click.prevent="del(car.row.breedid)">
							<el-icon><EditPen /></el-icon>删除
						</el-button>
						<el-button v-if="car.row.num!=0" style="background-color:#E1337F;" size="default" type="danger"  disabled="">
							<el-icon><EditPen /></el-icon>删除
						</el-button>
					</template>
				</el-table-column>
			    <el-table-column  label="类型管理信息(二级路由)" align="center" >
					<template #default="car">
						<div style="display: flex;">
						<div v-for="item in car.row.types" style="display: flex;">
							<div>
								<p>{{item.typename}}</p>
								<div style="background-color: #E1337F;height: 0.1rem;"></div>
							</div>
								&emsp;
						</div>
						</div>
					</template>
				</el-table-column>
			  </el-table>
			
			
		</div>
		</el-card>
		
		</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../../router/index.js"
		import store from "../../../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen} from '@element-plus/icons-vue'
		import bottom from "../../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../../store/alert.js'
		
		const data=reactive({
			breed:[{breedname:"a",types:[]}]
		})
		
		
		function add(){
			router.push("/mer/meraddbreed")
			
		}
		function update(breedid){
			router.push({
				path: '/mer/meraddbreed',
				query: {
					id:breedid
				}
			})
			
		}
		
		function del(breedid){
			$get("/mer/breed/del/"+breedid).then((read)=>{
				success(read.data.msg)
				data.breed=read.data.data
				
			})
		}
		
		
		onMounted(()=>{
			
			$get("/mer/breed/findAll").then((read)=>{
				
				data.breed=read.data.data.breed
			})
			
		})
		
</script>

<style>
</style>
